<template>
	<div class="tabs">
		<el-tag
			v-for="(item, index) in tags"
			:key="item.path"
			:closable="item.name !== 'home'"
			:effect="$route.name === item.name ? 'dark' : 'plain'"
			@click="changeTag(item)"
			@close="handleClose(item, index)"
			size = "small"
		>
			{{ item.label }}
		</el-tag>
	</div>
</template>

<script>
import { mapState, mapMutations } from "vuex"
export default {
	data() {
		return {}
	},
	computed: {
		...mapState({
			tags: (state) => state.tab.tabsList,
		}),
	},
	methods: {
		// 使用辅助函数方式提交 mutation
		...mapMutations(["deleteTag"]),
		// 点击tag跳转页面
		changeTag(item) {
			if (this.$route.path !== item.path) {		// 避免重复跳转
				this.$router.push({ name: item.name }) // 可以传入一个对象
			}
		},
		// 点击删除tag
		handleClose(item, index) {
			this.deleteTag(item)
			const lastTag = this.tags[this.tags.length - 1]
			if (this.$route.path !== lastTag.path) {
				this.$router.push({ name: lastTag.name })
			}
		},
	},
}
</script>
<style lang="less" scoped>
	.tabs {
		padding: 20px;
		.el-tag {
			margin-right: 15px;
			cursor: pointer;
		}
	}
</style>
